.header{
    height: 100px; /*la hauteur du menu de navigation*/
    width: 100%; /*la largeur du menu de navigation*/
    background-color :rgb(246, 202, 54); /*la couleur de l'arrière-plan du menu de navigation */
    padding: 0 20px; /*marge intérieur du menu de navigation*/
    color: rgb(54, 51, 92); /*couleur blanche de l'écriture du menu de navigation*/
    position: fixed; /*positionnement fixée du menu de navigation*/
    right: 0px; /*la position des éléments positionnés à droite*/
    z-index: 1000; /* Permet de s'afficher par dessus tout le contenu */ 
  }
  
  .logo{
    margin-top:7px;
    margin-left:7px;
    line-height: 100px; /*la hauteur du logo du menu de navigation d'une ligne. */
    float: left; /*flottant à gauche*/
    text-transform: uppercase; /*tous les caractères seront écrits en capitales.*/
    height: 80px;
    width: 80px;
    position: absolute; /*positionnement fixée du logo du menu de navigation*/
    left: 0px; /*la position des éléments positionnés à gauche*/
  }

  .title_soc{
    line-height: 100px; /*la hauteur du logo du menu de navigation d'une ligne. */
    float: left; /*flottant à gauche*/
    text-transform: uppercase; /*tous les caractères seront écrits en capitales.*/
    position: absolute; /*positionnement fixée du logo du menu de navigation*/
    left: 0px; /*la position des éléments positionnés à gauche*/
    margin-left:100px;
    color: rgb(54, 51, 92);
    text-decoration: none;
    font-size: 25px;
    font-weight: bold;
  }
  
  .menu{
    float: right; /*flottant à droite*/
    line-height: 100px; /*la hauteur du menu de navigation d'une ligne.*/
    position: fixed; /*positionnement fixée du menu de navigation*/
    right: 0px; /*la position des éléments positionnés à droite*/
  }
  
  .menu a{
    color: rgb(54, 51, 92); 
    text-transform: uppercase; /*tous les caractères seront écrits en capitales.*/
    text-decoration: none; /*pas de soulignement*/
    padding: 0 10px; /*marge intérieur du menu de navigation*/
    transition: 0.4s; /*contrôler la vitesse d'animation lorsque les propriétés CSS sont modifiées*/
    font-size: 20px;
    font-weight: bold;
  }
  
  .show-menu-btn,.hide-menu-btn{
    transition: 0.4s; /*contrôler la vitesse d'animation lorsque les propriétés CSS sont modifiées*/
    font-size: 30px; /*taille du l'écriture */
    cursor: pointer; /*forme du curseur (s'il y en a un) lorsque le pointeur est au-dessus de l'élément.*/
    display: none; /*l’élément ne s’affiche pas et ne génère aucune boite*/
  }
  
  .show-menu-btn{
    float: right; /*flottant à droite*/
  }
  
  .show-menu-btn i{
    line-height: 100px; /*la hauteur du bouton du menu de navigation d'une ligne.*/
  }
  
  .header a:hover{
    color: rgb(54, 51, 92);
  }

  .menu a:hover,
  
  .show-menu-btn:hover,
  
  .hide-menu-btn:hover
  {
    color: rgb(54, 51, 92); /*couleur bleu de l'écriture du menu de navigation*/
  }
  
  #chk{
    position: absolute; /*positionnement absolue*/
    visibility: hidden; /*visibilité invisible*/
    z-index: -1111; /*ordre d'affichage en cas de superposition*/
  }
  
  /* Sur les écrans, quand la largeur de la fenêtre fait au maximum 800px */
  @media screen and (max-width:1100px) {
    .show-menu-btn,.hide-menu-btn{
      display: block; /*élément de niveau block (block-level) et boites internes de type block (block container)*/
    }

    .title_soc{
      font-size: 30px;
    }

    .menu{
      position: absolute; /*positionnement fixée*/
      width: 100%; /*la largeur du menu de navigation*/
      height: 500%; /*la hauteur du menu de navigation*/
      background-color :rgb(246, 202, 54); /*la couleur de l'arrière-plan du menu de navigation */
      bottom: 100%; 
      text-align: left; /*le texte est centré*/
      padding: 125px 0; /*marge intérieur du menu de navigation*/
      line-height: normal; /*la hauteur du logo du menu de navigation d'une ligne en normal*/
      transition: 0.5s; /*contrôler la vitesse d'animation lorsque les propriétés CSS sont modifiées*/
    }
    .menu a{
      display: block; /*élément de niveau block (block-level) et boites internes de type block (block container)*/
      padding: 10px; /*marge intérieur du menu de navigation*/
      font-size:35px;
    }
    .hide-menu-btn{
      position: absolute; /*positionnement absolue*/
      top: 40px; /*une partie de la position des éléments positionnés*/
      right: 40px; /*la position des éléments positionnés à droite*/
    }
    #chk:checked ~ .menu{
      bottom: -400%; 
    }
    .menu a:hover,
    .show-menu-btn:hover,
    .hide-menu-btn:hover{
      color:rgb(54, 51, 92); /*couleur rose de l'écriture du menu de navigation*/
    }
  }